<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <title>工具 - 豆豆笔记</title>
    <meta name="keywords" content="豆豆笔记,豆豆笔记论坛,软件教程,开发常用工具" />
    <meta name="description" content="豆豆笔记是一个中文IT技术交流平台,包含原创博客、技术论坛、资源下载等服务的个人IT开发技术社区。" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/layui/css/layui.css" />
    <link rel="stylesheet" href="/static/css/main.css" />
    <style>
      .ws-tool-list li:not(:nth-child(5n)) {
        margin-right: 8px;
      }
      .dark .ws-search-icon {
        border-color: #626262;
      }

      .ws-tool-list li {
        margin-bottom: 8px;
      }

      .layui-col-xs2 {
        width: 19%;
      }

      .ws-tool-item {
        display: block;
        padding: 10px;
        border-radius: 5px;
        font-size: 16px;
        /*background-color: #e0e0e0;*/
        background-color: rgba(0, 0, 0, 0.1);
      }

      a.ws-tool-item:hover {
        color: #fff !important;
      }

      .ws-tool-item:hover {
        /*background-color: #c0c0c0;*/
        background-color: rgba(0, 0, 0, 0.2);
      }

      .dark .ws-tool-item {
        background-color: #424242;
      }

      .dark .ws-tool-item:hover {
        background-color: #323232;
      }

      .ws-tool-search {
        padding-left: 20px;
      }

      .ws-tool-search:focus,
      .ws-tool-search:hover {
        border-color: #eee !important;
        box-shadow: none;
      }

      .ws-tool-item img {
        width: 19px;
        margin-right: 5px;
        /*box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);*/
        border-radius: 3px;
        /* background-color: rgba(255, 255, 255, 1); */
      }

      .layui-text a:not(.layui-btn) {
        color: #626262;
      }

      .dark .layui-text a:not(.layui-btn) {
        color: #d4d4d4;
      }

      .layui-text a:not(.layui-btn):hover {
        text-decoration: none;
      }

      .dark .ws-tool-search {
        background-color: inherit;
        color: #aaa;
        border-color: #626262;
      }

      .dark .ws-tool-search:focus,
      .dark .ws-tool-search:hover {
        border-color: #626262 !important;
        box-shadow: none;
      }

      @media screen and (max-width: 768px) {
        .ws-tool-list li.layui-col-xs2 {
          width: 48%;
        }

        a.ws-tool-item:hover {
          background-color: #e0e0e0;
          color: #626262 !important;
        }

        .ws-tool-list li:not(:nth-child(5n)) {
          margin-right: 0;
        }

        .ws-tool-list li:not(:nth-child(2n)) {
          margin-right: 8px;
        }
      }
    </style>
  </head>

  <body>
    <div class="layui-header ws-header ws-bg-light">
      <div class="layui-container">
        <div class="ws-logo">
          <a class="logo" href="/" style="display: inline; align-items: center; font-size: 30px">
            <img src="/img/logo.png" alt="豆豆笔记" style="color: #16baaa; font-size: 30px; width: auto; height: 30px; line-height: 60px; margin-right: 10px" />
            <text style="margin-left: 0">豆豆笔记</text>
          </a>
        </div>
        <div class="ws-header-menu">
          <ul class="layui-nav layui-bg-gray ws-bg-light">
            <li class="layui-nav-item"><a href="/">首页</a></li>
            <li class="layui-nav-item"><a href="/link/">归档</a></li>
            <li class="layui-nav-item"><a href="/about/">关于</a></li>
            <li class="layui-nav-item layui-this"><a href="/tool/">导航</a></li>
            <li class="layui-nav-item"><a href="/sponsor/">赞助</a></li>
          </ul>
          <div class="ws-header-tool ws-bg-light" style="display: inline-block">
            <div class="layui-form" lay-filter="form">
              <input type="checkbox" name="themeMode" lay-filter="header-theme-mode" lay-skin="switch" />
              <div lay-checkbox>
                <i class="layui-icon layui-icon-moon"></i> |
                <i class="layui-icon layui-icon-light"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="ws-header-menu-btn">
          <a class="ws-menu-phone" href="javascript:;" style="display: block">
            <i class="ws-header-menu-icon layui-icon layui-icon-shrink-right"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="ws-menu-phone-list">
      <div style="background-color: inherit">
        <div style="height: 60px; text-align: right; display: flex; justify-content: space-between">
          <div class="ws-theme-icon-btn" style="border-radius: 7px; display: inline; margin-left: 40px; height: 40px; width: 40px; line-height: 40px; background-color: #d2d2d2; margin-top: 10px; text-align: center">
            <i class="ws-theme-icon layui-icon layui-icon-moon" style="color: #333333"></i>
          </div>
          <i class="ws-menu-phone-close layui-icon layui-icon-error" style="color: #333333; line-height: 60px; font-size: 23px"></i>
        </div>
        <ul>
          <li style="border-top: 1px solid #888888; padding: 20px 40px"><a href="/">首页</a></li>
          <li style="border-top: 1px solid #888888; padding: 20px 40px"><a href="/link/">归档</a></li>
          <li style="border-top: 1px solid #888888; padding: 20px 40px"><a href="/about/">关于本站</a></li>
          <li style="border-top: 1px solid #888888; padding: 20px 40px"><a href="/tool/">导航</a></li>
          <li style="border-top: 1px solid #888888; padding: 20px 40px"><a href="/sponsor/">赞助我们</a></li>
        </ul>
      </div>
    </div>

    <div id="app" class="layui-main ws-main ws-bg-light">
      <div class="layui-text" style="padding: 15px">
        <h2 style="color: rgba(255, 55, 255, 0)">搜索</h2>

        <div class="layui-col-md4" style="float: none">
          <!--            <div class="layui-input-wrap">-->
          <div class="layui-input-group" style="width: 100%">
            <input type="text" v-model="searchKey" placeholder="搜索" class="ws-tool-search layui-input" style="border-radius: 38px 0 0 38px; border-right-width: 0" />
            <div class="ws-search-icon layui-input-split layui-input-suffix" style="border-left-width: 0; border-radius: 0 38px 38px 0; padding: 0 5px">
              <i class="layui-icon layui-icon-search" v-if=" !searchKey"></i>
              <i class="layui-icon layui-icon-close" @click="clear" style="cursor: pointer" v-else></i>
            </div>
          </div>
        </div>
        <p></p>
        <br />
        <template v-for="item in filteredList" v-if="filteredList.length > 0">
          <h2>{{item.title}}</h2>
          <ul class="layui-row ws-tool-list">
            <li class="layui-col-xs2" v-for="c in item.data">
              <a class="ws-tool-item" :href="c.url" :target="c.target" :title="c.title||c.text">
                <img loading="lazy" :src="c.icon" />
                <span>{{c.text}}</span>
              </a>
            </li>
          </ul>
          <p></p>
          <br />
        </template>
        <template v-else>
          <p>暂无结果</p>
        </template>
      </div>
    </div>

    <script type="text/html" id="qrModal">
      <div class="layui-row" style="display: flex; padding:15px;">
        <div class="layui-col-md6" style="flex: 0 0 50%;text-align: center;">
          <img src="/img/wxpay.jpg" class="ws-sponsor-img" />
        </div>
        <div class="layui-col-md6" style="flex: 0 0 50%;text-align: center;">
          <img src="/img/alipay.jpg" class="ws-sponsor-img" />
        </div>
      </div>
    </script>

    <div class="layui-footer ws-footer ws-bg-light">
      <div class="ws-text">
        <div class="ws-footer-menu">
          <div class="ws-footer-menu-type">
            <dl style="flex: 0 0 50%; max-width: 33.33%; width: 100%">
              <dt class="ws-bg-light">相关连接</dt>
              <dd><a class="no-referrer" href="javascript:;" data-title="请作者喝咖啡" data-target="#qrModal">捐赠</a></dd>
            </dl>
            <dl style="flex: 0 0 50%; max-width: 33.33%; width: 100%">
              <dt class="ws-bg-light">联系我们</dt>
              <dd>htct1314@foxmail.com</dd>
            </dl>
          </div>
          <div class="ws-footer-qr-code-list">
            <div class="ws-footer-qr-code">
              <div style="border: 1px solid #d1d1d1">
                <img src="/img/applet.jpg" style="width: 100%; max-width: 100%" alt="" />
              </div>
              <div style="text-align: center">小程序</div>
            </div>
            <div class="ws-footer-qr-code">
              <div style="border: 1px solid #d1d1d1">
                <img src="/img/we_chat.png" style="width: 100%; max-width: 120px" alt="" />
              </div>
              <div style="text-align: center">微信</div>
            </div>
            <div class="ws-footer-qr-code">
              <div style="border: 1px solid #d1d1d1">
                <img src="/img/sina.png" style="width: 100%; max-width: 120px" alt="" />
              </div>
              <div style="text-align: center">新浪微博</div>
            </div>
          </div>
        </div>
        <hr />
        <p>
          友情链接：
          <a href="//www.aliyun.com" target="_blank">阿里云</a>
          <a href="https://www.huaweicloud.com/" target="_blank">华为云</a>
          <a href="//cloud.tencent.com" target="_blank">腾讯云</a>
          <a href="//www.ctyun.cn/" target="_blank">天翼云</a>
          <a href="//layui.dev" target="_blank">Layui</a>
          <a href="//cli.im/" target="_blank">草料网</a>
          <a href="//compresspng.com/zh/" target="_blank">在线压缩图片</a>
          <a href="//www.thinkphp.cn" target="_blank">ThinkPHP</a>
        </p>
        <div class="ws-footer-copyright">
          <div>Copyright © <span id="footer-year"></span> 豆豆笔记 All Rights Reserved.</div>
          <div>豆豆笔记&nbsp;版权所有</div>
          <div>
            <a href="https://beian.miit.gov.cn" target="_blank">
              <img src="/img/icon.png" style="height: 16px; margin-right: 5px" alt />
              <span>闽ICP备2022002089号-1</span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <ul class="layui-fixbar" style="display: none">
      <li lay-type="top" style="display: list-item">
        <a href="JavaScript:;" class="layui-icon layui-icon-top layui-fixbar-top" style="display: block; color: #fff"></a>
      </li>
    </ul>

    <script src="/layui/layui.js"></script>
    <script src="/static/js/main.js"></script>
    <script src="/static/js/vue_3.5.13.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      const { createApp } = Vue;
      createApp({
        data() {
          return {
            searchKey: "",
            list: [],
          };
        },
        created() {
          $.ajax({
            url: "/static/json/tool.json",
            success: (res) => {
              // res.forEach((item) => {
              //   item.data.sort((a, b) => b.text.localeCompare(a.text));
              // });

              this.list = res;
            },
          });
        },
        methods: {
          clear() {
            this.searchKey = "";
          },
        },
        computed: {
          filteredList() {
            let key = this.searchKey.trim();
            if (!key) return this.list;
            let list = [];
            for (let i = 0; i < this.list.length; i++) {
              let a = this.list[i].data.filter((item) => item.text.toLowerCase().includes(key.toLowerCase()) || (item.description ? item.description.toLowerCase().includes(key.toLowerCase()) : false));
              if (a.length > 0) {
                list.push({
                  title: this.list[i].title,
                  data: a,
                });
              }
            }
            return list;
          },
        },
      }).mount("#app");
    </script>
  </body>
</html>
